{"componentChunkName":"component---src-templates-blog-post-js","path":"/Radio-Player-App-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"921ccaed-e817-50d6-b11f-902664cf8d8f","excerpt":"Sometimes you gotta do what you gotta do. For quite a while I’ve had this idea of making a radio player or an app which you could use to search up or browse…","html":"

Sometimes you gotta do what you gotta do. For quite a while I’ve had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it. If you want to see how I did it keep on reading and if you prefer a video version you can watch me build a radio player app in React on Youtube:

\n
\n

I started a new React app by running the create-react-app command in my working folder.

\n
create-react-app radio
\n

I made a new component called Radio.js and imported it into App.js. I also added a couple of headings in there.

\n
// App.js\n\nimport \"./App.scss\"\nimport Radio from \"./Radio\"\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <h1>Super-Duper Radio Player</h1>\n      <h2>Pick a genre, choose a station, start listening</h2>\n      <Radio />\n    </div>\n  )\n}\n\nexport default App
\n

I imagined this as a simple app which you could use to get a bunch of different radio stations and either search through them or filter them in some way, preferably through music genres or radio station types. After looking through several different radio APIs I decided on using an React existing module to get the stations as it turned out that I would otherwise need to set up a server to fetch them which would have been a bit of an overkill.

\n

I installed radio-browser-api which has the music genre as one of the entry parameters for searching through the data, which was perfect for me. I also installed react-h5-audio-player which I will use later to play the radio streams and I proceeded with making a filter section.

\n
import React, { useEffect, useState } from \"react\"\nimport { RadioBrowserApi } from \"radio-browser-api\"\nimport AudioPlayer from \"react-h5-audio-player\"\nimport \"react-h5-audio-player/lib/styles.css\"\n\nexport default function Radio() {\n  const [stations, setStations] = useState()\n  const [stationFilter, setStationFilter] = useState(\"all\")\n\n  const filters = [\n    \"all\",\n    \"classical\",\n    \"country\",\n    \"dance\",\n    \"disco\",\n    \"house\",\n    \"jazz\",\n    \"pop\",\n    \"rap\",\n    \"retro\",\n    \"rock\",\n  ]\n\n  return (\n    <div className=\"radio\">\n      <div className=\"filters\">\n        {filters.map((filter, index) => (\n          <span\n            key={index}\n            className={stationFilter === filter ? \"selected\" : \"\"}\n            onClick={() => setStationFilter(filter)}\n          >\n            {filter}\n          </span>\n        ))}\n      </div>\n      <div className=\"stations\"></div>\n    </div>\n  )\n}
\n

I made an array which contains a bunch of different genres which I found were working properly with the RadioBrowserApi component. Then I mapped them out into a container and made them clickable. After clicking on a station filter we set the active music type with useState and we also “mark” it with the “selected” CSS class, which we’ll use later to distinguish the selected filter from the rest.

\n

Now we need to get the radio stations data and we’ll do that inside of a useEffect hook.

\n
useEffect(() => {\n  setupApi(stationFilter).then(data => {\n    setStations(data)\n  })\n}, [stationFilter])\n\nconst setupApi = async stationFilter => {\n  const api = new RadioBrowserApi(fetch.bind(window), \"My Radio App\")\n\n  const stations = await api\n    .searchStations({\n      language: \"english\",\n      tag: stationFilter,\n      limit: 30,\n    })\n    .then(data => {\n      return data\n    })\n\n  return stations\n}
\n

Our useEffect will trigger every time our stationFilter changes and it will call the searchStations() function through the RadioBrowserApi. We can pass several different parameters into it, but I settled on setting the language to english, filtering the stations by the station filter that we previously set up and limiting the results to 30 stations. After we get the data we update our state with it and we will proceed with mapping it into the page, right below the filters.

\n
const setDefaultSrc = event => {\n  event.target.src = defaultImage\n}\n\nreturn (\n  <div className=\"radio\">\n    <div className=\"filters\">\n      {filters.map((filter, index) => (\n        <span\n          key={index}\n          className={stationFilter === filter ? \"selected\" : \"\"}\n          onClick={() => setStationFilter(filter)}\n        >\n          {filter}\n        </span>\n      ))}\n    </div>\n    <div className=\"stations\">\n      {stations &&\n        stations.map((station, index) => {\n          return (\n            <div className=\"station\" key={index}>\n              <div className=\"stationName\">\n                <img\n                  className=\"logo\"\n                  src={station.favicon}\n                  alt=\"station logo\"\n                  onError={setDefaultSrc}\n                />\n                <div className=\"name\">{station.name}</div>\n              </div>\n            </div>\n          )\n        })}\n    </div>\n  </div>\n)
\n

We get some interesting things from the API, such as the station name, logo and the resolved url of the audio stream. Sometimes the API won’t return a proper image Url, or the image will for some reason be inaccessible. We resolve this issue by setting up the onError event on our img tag. If the image errors out we call out little setDefaultSrc function which switches the image source with a default image we provide it with. Don’t forget to import your image into the component first.

\n

The next thing we need to do is setting up the AudioPlayer component we installed previously.

\n
<AudioPlayer\n  className=\"player\"\n  src={station.urlResolved}\n  showJumpControls={false}\n  layout=\"stacked\"\n  customProgressBarSection={[]}\n  customControlsSection={[\"MAIN_CONTROLS\", \"VOLUME_CONTROLS\"]}\n  autoPlayAfterSrcChange={false}\n/>
\n

The AudioPlayer component accepts several different props. You can set up a className per usual, but the main thing is the src prop which we need to set with the urlResolved value we get from the API. The rest is just some visual settings which you can play around with, or check out their documentation for more options. You will probably want to set autoPlayAfterSrcChange to false as that will prevent all AudioPlayer instances from auto playing when you switch between your filters. All of the other settings I’ve used are just for hiding the controls I don’t need.

\n

Here is the final look of the Radio.js component:

\n
import React, { useEffect, useState } from \"react\"\nimport { RadioBrowserApi } from \"radio-browser-api\"\nimport AudioPlayer from \"react-h5-audio-player\"\nimport \"react-h5-audio-player/lib/styles.css\"\nimport defaultImage from \"./radio.jpg\"\n\nexport default function Radio() {\n  const [stations, setStations] = useState()\n  const [stationFilter, setStationFilter] = useState(\"all\")\n\n  useEffect(() => {\n    setupApi(stationFilter).then(data => {\n      console.log(data)\n      setStations(data)\n    })\n  }, [stationFilter])\n\n  const setupApi = async stationFilter => {\n    const api = new RadioBrowserApi(fetch.bind(window), \"My Radio App\")\n\n    const stations = await api\n      .searchStations({\n        language: \"english\",\n        tag: stationFilter,\n        limit: 30,\n      })\n      .then(data => {\n        return data\n      })\n\n    return stations\n  }\n\n  const filters = [\n    \"all\",\n    \"classical\",\n    \"country\",\n    \"dance\",\n    \"disco\",\n    \"house\",\n    \"jazz\",\n    \"pop\",\n    \"rap\",\n    \"retro\",\n    \"rock\",\n  ]\n\n  const setDefaultSrc = event => {\n    event.target.src = defaultImage\n  }\n\n  return (\n    <div className=\"radio\">\n      <div className=\"filters\">\n        {filters.map((filter, index) => (\n          <span\n            key={index}\n            className={stationFilter === filter ? \"selected\" : \"\"}\n            onClick={() => setStationFilter(filter)}\n          >\n            {filter}\n          </span>\n        ))}\n      </div>\n      <div className=\"stations\">\n        {stations &&\n          stations.map((station, index) => {\n            return (\n              <div className=\"station\" key={index}>\n                <div className=\"stationName\">\n                  <img\n                    className=\"logo\"\n                    src={station.favicon}\n                    alt=\"station logo\"\n                    onError={setDefaultSrc}\n                  />\n                  <div className=\"name\">{station.name}</div>\n                </div>\n\n                <AudioPlayer\n                  className=\"player\"\n                  src={station.urlResolved}\n                  showJumpControls={false}\n                  layout=\"stacked\"\n                  customProgressBarSection={[]}\n                  customControlsSection={[\"MAIN_CONTROLS\", \"VOLUME_CONTROLS\"]}\n                  autoPlayAfterSrcChange={false}\n                />\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}
\n

The only thing left to do is make all of this a bit more presentable by adding some (S)CSS to it. Here is what I’ve used:

\n
@import url(\"https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap\");\n\n.App {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\nbody {\n  background: rgb(40, 31, 53);\n  background: linear-gradient(to right, rgb(40, 31, 53), rgb(61, 46, 83));\n  color: rgb(235, 235, 235);\n  font-family: \"Architects Daughter\", cursive;\n}\n\nh1 {\n  margin: 1em 0 0 0;\n  font-size: 3rem;\n}\n\nh2 {\n  margin-bottom: 2em;\n}\n\n.radio {\n  max-width: 60em;\n  width: 100%;\n}\n\n.filters {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-bottom: 2em;\n  font-size: 1.2rem;\n  width: 100%;\n\n  span {\n    margin: 0.25em;\n    border: 1px solid #e36bae;\n    border-radius: 10px;\n    padding: 0.25em 0.75em;\n\n    &:hover {\n      cursor: pointer;\n      background: linear-gradient(to bottom right, #e36bae, #fb743e);\n    }\n  }\n\n  .selected {\n    background: linear-gradient(to bottom right, #e36bae, #fb743e);\n  }\n}\n\n.stations {\n  display: grid;\n  grid-template-columns: repeat(3, 33%);\n  width: 100%;\n}\n\n.station {\n  font-size: 1.2em;\n  border: 1px solid rgb(76, 62, 95);\n  margin: 0.25em;\n  border-radius: 10px;\n  padding: 1em;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    border-color: #e36bae;\n  }\n}\n\n.stationName {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 1em;\n  width: 100%;\n  align-items: center;\n  justify-content: start;\n}\n\n.name {\n  width: 100%;\n  text-align: center;\n}\n\nimg {\n  display: block;\n  width: 2.5em;\n  height: 2.5em;\n  border-radius: 50%;\n  border: 2px solid rgb(76, 62, 95);\n  margin: 0 0.25em;\n}\n\naudio {\n  width: 100%;\n}\n\n.rhap_container.player {\n  background-color: rgb(76, 62, 95);\n  display: flex;\n  justify-items: center;\n  padding: 0.25em 0.75em;\n  border-radius: 10px;\n}\n\n.rhap_stacked .rhap_controls-section {\n  margin-top: 0 !important;\n}\n\n.rhap_controls-section .rhap_volume-controls {\n  justify-content: center;\n}\n\n.rhap_controls-section .rhap_main-controls button[aria-label=\"Play\"] svg path {\n  fill: rgb(235, 235, 235) !important;\n}\n\n.rhap_controls-section .rhap_main-controls button[aria-label=\"Pause\"] svg path {\n  fill: #e36bae !important;\n}\n\n@media only screen and (max-width: 600px) {\n  .stations {\n    grid-template-columns: repeat(2, 50%);\n  }\n\n  img {\n    display: none;\n  }\n}
\n

Nothing major to explain here. I’ve used the grid to set up the stations into a 3-column layout for desktop and a 2-column layout on mobile. I used flexbox to align and center everything else. The weird selectors in the end are for overriding the AudioPlayer’c CSS. There were some instructions on how to do it with setting up SCSS properties, but I couldn’t make it work that way.

\n

With that our radio app prototype is finished, or is it? There are all sorts of things you could add to this to make it both more functional and easier to use. A couple of things that spring to mind are making the stations searchable by name and adding an option to bookmark stations or mark them as favorite. If you do end up improving this app idea send me a message, I would love to see your creations!

\n
\n \n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n \nI also have a YouTube channel where I regularly upload React and web dev tutorials, so if that's your cup of tea feel free to support me by subscribing.
\n

If you want to see the live app in action check out this CodeSandbox:

\n","frontmatter":{"title":"Radio Player App in React","series":null,"seriesLink":null,"date":"March 09, 2021","description":"Sometimes you gotta do what you gotta do. For quite a while I've had this idea of making a radio player or an app which you could use to search up or browse different radio stations, but something else always came first. The holidays, job, working on other projects, but I finally got around to doing it.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQUlEQVQozx2SS0hUcRSHZx1YCC1yfGT5NvGRDBU9QAZDFHzBmKWLpFxEQpBQLTKLwBkfYY1NouNj3q97Z+48vHNnnFGbcbJVqyhsGW2iTavWX39dHTgcvsM5309XpOxSGtFoiCSpj6jUemUaN3w0OAOi+mnY9FHnkWgOq5QFVIpDO5wOZLgY+0iXlqN3u0BPKs+lrTwVkRS6c0qSxmiSUiWKXpbQS9JxrXJ4qBKw8mAIfTBIXVSlRECL/GlasgU60nu0h1SuSEkMwSSdsSxGbR9dYyLN2WCYgRkfA2YvJrObkSkvd1+6GJp10rXgZ+yZG6MjzKBF5t4LP/MzUaafBzDaI1Q7w7T6ErQFthhM59HVbqU4L4Z3+mwcDlk46LbxfdTMv6uzxB7OI42840/PDEuP1lDurPJteJHPI2/5aZxjbHmNejlNk0uh2RvnRjiNrkbLYHDI/Lo5x1eTmd+dFg5vW/g79ArPxDILT204nljJ3bKijr8n9tjN9n0bP4bn6VqRaJVTXDgCemJcE+frKsX/WhQN07KdXusmox/W6XcE6Fv10OHyYxCSJhclXlvdTCzFSc3t88Wisf9GZdqWoVpc1+pP0CKA/Wnxw1NKhtqYxpl4hnJXlAq7RGkgTpU3SqUszIre+EqWB6sHdG7mmbTnWHAWmPJ8wrSucjl4JEWlI5qhO51DdyKeoziSoU5RaRLG2zdC1PiE8aBGsZzlZHiPktAu+kBWxCUrlqRoWwthkAUgsUuflj+OzXWtQJmS5T+G3p2pl9LbsAAAAABJRU5ErkJggg==","aspectRatio":2.6666666666666665,"src":"/static/089090f649eaebf75d83fee9b0c1db68/0e6e2/radio.png","srcSet":"/static/089090f649eaebf75d83fee9b0c1db68/b460a/radio.png 480w,\n/static/089090f649eaebf75d83fee9b0c1db68/6e898/radio.png 960w,\n/static/089090f649eaebf75d83fee9b0c1db68/0e6e2/radio.png 1920w","srcWebp":"/static/089090f649eaebf75d83fee9b0c1db68/30cf3/radio.webp","srcSetWebp":"/static/089090f649eaebf75d83fee9b0c1db68/35871/radio.webp 480w,\n/static/089090f649eaebf75d83fee9b0c1db68/fcc10/radio.webp 960w,\n/static/089090f649eaebf75d83fee9b0c1db68/30cf3/radio.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Radio-Player-App-in-React/","previous":{"excerpt":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g.…","fields":{"slug":"/Infinite-Pomodoro-App-in-React/"},"frontmatter":{"date":"February 21, 2021","title":"Infinite Pomodoro App in React","series":null,"description":"Pomodoro is a time management technique in which you work for a set amount of time (e.g. 25 minutes), then you take a small break (e.g. 5 minutes) and then you repeat this cycle. In classic Pomodoro you would work for 4 cycles total and then take a longer break, but in this simplified version we are going to build a time tracker that repeats infinitely. Or, until you decide to stop working and close the browser for the day.","tags":["web","react"],"featuredImage":{"id":"5f17ed00-9d36-57fb-ae49-a730772af062","publicURL":"/static/0b5e120ab5fae721e3a3a1c4705557dd/pomodoro.png","relativeDirectory":"Infinite-Pomodoro-App-in-React","relativePath":"Infinite-Pomodoro-App-in-React/pomodoro.png"}}},"next":{"excerpt":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s…","fields":{"slug":"/Comic-Book-App-With-Marvel-API-and-React/"},"frontmatter":{"date":"November 02, 2023","title":"Comic Book App With Marvel API and React","series":null,"description":"I grew up on both DC and Marvel comic books, cartoons and TV shows. From the 1966 Batman series, to 1967 Spider man cartoons, and 1940s Superman cartoons. Which is sort of ridiculous since I grew up in the 90s, but I guess that's what our TV companies could afford at the time.","tags":["web","react","API"],"featuredImage":{"id":"4bc9cdf5-bdec-5969-b277-f3d1db641a0d","publicURL":"/static/9dc0ca21ac4035a31d6c67333000d87c/marvel.png","relativeDirectory":"Comic-Book-App-With-Marvel-API-and-React","relativePath":"Comic-Book-App-With-Marvel-API-and-React/marvel.png"}}}}}}